<template>
  <div>
    <el-container v-show="loading == false" v-loading="loading">
      <el-header style="font-size: 12px;">
        <el-row>
          <el-col :span="8">
            <div style="font-size: 20px; color: #ffffff; font-weight: bold; margin: auto;">商品详情</div>
          </el-col>
          <el-col :span="10">
            <div class="grid-content">
              <!-- <el-button>刷新</el-button> -->
            </div>
          </el-col>
          <el-col :span="6" style="text-align: right;">
            <div v-show="user.login == true">
              <el-button
                icon="el-icon-shopping-cart-2"
                style="color: #ffffff; background-color: rgba(255,255,255,0.2); border: none; margin-right: 20px;"
                circle
                plain
                @click="toShoppingcart"
              ></el-button>

              <!-- <i class="el-icon-shopping-cart-2" style="margin: 10px;"></i> -->
              <span style="font-size: 16px; color: #ffffff; margin-right: 10px;">{{user.userName}}</span>
              <el-dropdown style="margin-right: 10px;">
                <i class="el-icon-setting" style="margin-left: 15px; color: #ffffff"></i>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item @click.native="toUsercenter">用户中心</el-dropdown-item>
                  <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>

            <div v-show="user.login == false">
              <el-button
                style="color: #ffffff; background-color: rgba(255,255,255,0.2); border: none; margin-right: 20px;"
                round
                plain
                @click="toLogin()"
              >登录</el-button>
            </div>
          </el-col>
        </el-row>
      </el-header>
      <el-main>
        <!-- style="border: 1px solid #00ff00;" -->
        <div>
          <div
            style="width: 1000px; border: 1px solid #ffffff; margin:auto; background-color: #ffffff"
          >
            <ProduceDetail ref="produceDetail" />
          </div>
        </div>
      </el-main>
      <el-footer></el-footer>
    </el-container>
  </div>
</template>

<script>
import ProduceDetail from "@/components/Produce/ProduceDetail";

export default {
  name: "Produce",
  data() {
    return {
      loading: true,
      user: {
        login: false,
      },
    };
  },
  components: {
    ProduceDetail,
  },
  methods: {
    init(produceId) {
      var url;

      url = process.env.URL_HEAD + "/touser/user/page/check/login";

      this.$http.get(url, { withCredentials: true }).then(
        (response) => {
          //   console.log(response);

          if (response.data.status == "ok") {
            this.user.userId = response.data.userId;
            this.user.userName = response.data.userName;
            this.user.login = true;
          } else {
          }
        },
        (response) => {}
      );

      url = process.env.URL_HEAD + "/produce/produce/info/" + produceId;

      this.$http.get(url).then(
        (response) => {
          //   console.log(response);

          if (response.data.produce != null) {
            if (response.data.produce.produceStatus == 0) {
              this.$emit("produceNoFound");
              console.log("find nothing");
            }
            else
              this.$refs.produceDetail.init(response.data.produce);

            console.log("initProduce ok");
          } else {
            this.$emit("produceNoFound");
            console.log("find nothing");
          }

          this.loading = false;
        },
        (response) => {
          this.$emit("produceNoFound");
          console.log("initProduce fail");

          this.loading = false;
        }
      );

      url = process.env.URL_HEAD + "/touser/user/page/check/login";

      this.$http.get(url, { withCredentials: true }).then(
        (response) => {
          //   console.log(response);

          if (response.data.status == "ok") {
            this.user.isLogin = 1;
            this.user.userName = response.data.userName;
          } else {
            console.log("no login");
          }
        },
        (response) => {}
      );
    },
    toLogin() {
      var newHref =
        process.env.LOGIN_URL + "?originUrl=" + window.location.href;
      window.location.href = newHref;
    },
    logout() {
      var url = process.env.URL_HEAD + "/touser/user/page/logout";

      this.$http
        .get(url, {
          withCredentials: true,
        })
        .then(
          (response) => {
            // this.$message.success("退出成功！");
            location.reload();
          },
          (response) => {
            this.$message.error("系统异常，请重试");
          }
        );
    },
    toUsercenter() {
      window.open(process.env.USERCENTER_URL);
      // window.location.href = process.env.USERCENTER_URL;
    },
    toShoppingcart() {
      window.location.href = process.env.SHOPPINGCART_URL;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-header {
  background-color: #69a57b;
  color: #333;
  line-height: 60px;
}

.el-footer {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  color: #333;
  text-align: center;
}

.main-div {
  left: 200px;
}

.grid-content {
  min-height: 36px;
}
</style>
